<template>
  <el-dialog
    title="动火方案"
    :visible.sync="dialog"
    width="50%"
    :close-on-click-modal="false"
    close-on-press-escape
    append-to-body
  >
    <div id="printMe">
      <div class="number">编号：{{ obj.serialNumber }}</div>
      <!-- <div class="title">动火方案审批表</div> -->
      <table>
        <!-- <tr>
          <td>编号</td>
          <td colspan="4">{{ obj.serialNumber }}</td>
        </tr> -->
        <tr>
          <td rowspan="5">一、施工组织</td>
          <td>动火申请单位</td>
          <td colspan="3">{{ obj.hotApplyUnit }}</td>
        </tr>
        <tr>
          <td>动火作业时间</td>
          <td colspan="3">{{ timeHandle(obj) }}</td>
        </tr>
        <tr>
          <td>基层站场（作业区）负责人</td>
          <td>{{ obj.workAdminUserName }}</td>
          <td>动火作业级别</td>
          <td>{{ obj.hotLevel }}</td>
        </tr>
        <tr>
          <td>动火作业地点</td>
          <td colspan="3">{{ obj.hotPlace }}</td>
        </tr>
        <tr>
          <td>动火作业单位负责人</td>
          <td>{{ obj.hotWorkUnitAdmin }}</td>
          <td>动火作业单位监护人</td>
          <td>{{ obj.hotWorkUnitGuardian }}</td>
        </tr>
        <tr>
          <td>二、动火作业内容及目的</td>
          <td colspan="4">{{ obj.hotContent }}</td>
        </tr>
        <tr>
          <td colspan="5">
            <div>
              三、动火作业部位与周围油气流程及置换隔断示意图（管线要注明介质、尺寸，控制流程中的阀门要编号，由动火申请单位绘制，生产部门审核）
            </div>
            <div v-if="obj.sketchMap">
              <el-image
                v-for="(img, i) in obj.sketchMap.split(';')"
                :key="i"
                class="image"
                fit="cover"
                alt="点击查看大图"
                :src="img | imgPath"
                :preview-src-list="getSrcList(obj.sketchMap)"
              />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>四、动火作业安全技术措施及现场施工组织（内容较多时可另加纸）（内容参见附录C.1）</div>
            <div>{{ obj.measure }}</div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>五、动火作业单位审查意见（负责人）</div>
            <div>{{ obj.hotWorkUnitAdminApproval?obj.hotWorkUnitAdminApproval.approvalComments:"" }}</div>
            <div class="txt-right">
              <span class="mr-r-100">签字：{{ obj.hotWorkUnitAdmin }}</span>
              <span
                v-if="obj.hotWorkUnitAdminApproval"
              >{{ obj.hotWorkUnitAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</span>
              <span v-else />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>六、作业区域所在基层单位审查意见：</div>
            <div>{{ obj.basicUnitAdminApproval?obj.basicUnitAdminApproval.approvalComments:"" }}</div>
            <div class="txt-right">
              <span class="mr-r-100">签字：{{ obj.basicUnitAdminUsername }}</span>
              <span
                v-if="obj.basicUnitAdminApproval"
              >{{ obj.basicUnitAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</span>
              <span v-else />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">七、二级单位业务主管部门审查意见</td>
          <td>
            <div>生产调度运行部门：</div>
            <div>签字:{{ obj.twoProductionAdminUsername }}</div>
            <div v-if="obj.twoProductionAdminApproval">
              {{ obj.twoProductionAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
          <td>
            <div>资产设施管理部门（生产、管道或工程）：</div>
            <div>签字:{{ obj.towAssetsAdminUsername }}</div>
            <div v-if="obj.towAssetsAdminApproval">
              {{ obj.towAssetsAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
          <td>
            <div>安全监管部门：</div>
            <div>签字:{{ obj.twoSafetyAdminUsername }}</div>
            <div v-if="obj.twoSafetyAdminApproval">
              {{ obj.twoSafetyAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>八、二级单位主管领导：</div>
            <div class="txt-right">
              <span class="mr-r-100">签字：{{ obj.leaderAdminUsername }}</span>
              <span
                v-if="obj.leaderAdminApproval"
              >{{ obj.leaderAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</span>
              <span v-else />
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">九、公司部门业务主管部门审查意见</td>
          <td>
            <div>生产调度运行部门：</div>
            <div>签字:{{ obj.productionAdminUsername }}</div>
            <div v-if="obj.productionAdminApproval">
              {{ obj.productionAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
          <td>
            <div>资产设施管理部门（生产、管道或工程）：</div>
            <div>签字:{{ obj.assetsAdminUsername }}</div>
            <div v-if="obj.assetsAdminApproval">
              {{ obj.assetsAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
          <td>
            <div>安全监管部门：</div>
            <div>签字:{{ obj.safetyAdminUsername }}</div>
            <div v-if="obj.safetyAdminApproval">
              {{ obj.safetyAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</div>
            <div v-else />
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div>十一、资产设施管理部门负责人:</div>
            <div class="txt-right">
              <span class="mr-r-100">签字：{{ obj.facilityAdminUsername }}</span>
              <span
                v-if="obj.facilityAdminApproval"
              >{{ obj.facilityAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</span>
              <span v-else />
            </div>
          </td>
        </tr>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="dialog = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  dateFormat,
  imgPath
} from '@/filters'
export default {
  data() {
    return {
      obj: {
        basicUnitAdminApproval: {},
        hotWorkUnitAdminApproval: {}
      },
      dialog: false
    }
  },
  created() {},
  methods: {
    timeHandle({
      hotWorkStartTime,
      hotWorkEndTime
    }) {
      if (hotWorkStartTime && hotWorkEndTime) {
        return dateFormat(hotWorkStartTime, 'YYYY 年 MM 月 DD 日') + ' 至 ' + dateFormat(hotWorkEndTime,
          'YYYY 年 MM 月 DD 日')
      } else {
        return
      }
    },
    getSrcList(str) {
      let arr = []
      if (str) {
        arr = str.split(';')
      }
      return arr.map(item => imgPath(item))
    }
  }
}
</script>

<style lang="less" scoped>
  .title {
    text-align: center;
    border: none;
    margin-bottom: 20px;
  }

  .number {
    text-align: right;
    border: none;
    width: 95%;
    margin-bottom: 20px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;

    td {
      line-height: 22px;
      border: 1px solid;
      padding: 14px;
    }

    td:nth-child(odd) {
      width: 20%;
    }
  }

  .txt-right {
    text-align: right;
  }

  .image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .mr-r-100 {
    margin-right: 100px;
  }
</style>
